<script setup lang='ts'>
import type { PlusColumn } from 'plus-pro-components'
import { useAllAreaList, useParkAddOrUpdate, useParkShow, useGetDictData } from '@fl/api/xf-api'
import type { parkSaveParam } from '@fl/api/xf-api/model/industry-evaluation-model'
import { SubmitBtn } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import searchMap from './search-map.vue'

const { go } = useRouter()
const form = ref()

const route = useRoute()
const _id = route.params?.id as string
const id = ref<string>(_id ?? '')
const areaOptions = ref<any>([])
const dictOptions = ref<any>([])
// console.log('id', id.value)

const initialState = {
    latitude: 0,
    longitude: 0,
    address: '', //临时组件传值使用
    parkName: '',
    areaId: undefined,
    typeId: undefined,

}
const state = ref<parkSaveParam>(cloneDeep(initialState))

const { data: areaList } = useAllAreaList()
const { data, isLoading: projectLoading } = useParkShow(id)
const { data: dictList } = useGetDictData({ dictType: 'park_layout_classification' })
watchEffect(() => {
    if (data.value) {
        state.value = {
            ...data.value,
            address: data.value.parkName
        }
    }
    if (areaList.value) {
        areaOptions.value = cloneDeep(areaList.value).reduce((pre: any, cur: any) => {
            cur.label = cur.areaName
            cur.value = cur.areaDistrictId
            pre.push(cur)
            return pre
        }, [])
        // console.log('areaOptions.value', areaOptions.value)
    }
    if (dictList.value) {
        dictOptions.value = cloneDeep(dictList.value.park_layout_classification)
        // console.log('dictOptions.value', dictOptions.value)
    }
})

const isLoading = ref<boolean>(false)

// 提交表单
const { isPending, mutate } = useParkAddOrUpdate()

async function submit() {
    const valid = await form.value.formInstance.validate()
    if (valid) {
        const stateObj = toRaw(state.value)
        // 加上区域、类型的中文
        const targetArea = areaOptions.value.find((v: any) => v.value === state.value.areaId)
        const targetType = dictOptions.value.find((v: any) => v.value === state.value.typeId)
        const params = {
            ...stateObj,
            parkName: stateObj.address,
            areaName: targetArea.label,
            typeName: targetType.label,
        }
        console.log('params', params)
        mutate(params, {
            onSuccess: () => {
                ElMessage.success('操作成功')
                goBack()
            },
        })
    }
}

function goBack() {
    go(-1)
}

const columns: PlusColumn[] = [
    {
        colProps: {
            span: 10,
        },
        label: '所属区域',
        prop: 'areaId',
        valueType: 'select',
        options: computed(() => {
            return areaOptions.value
        })
    },
    {
        colProps: {
            span: 10,
        },
        label: '空间布局类型',
        prop: 'typeId',
        valueType: 'select',
        options: computed(() => {
            return dictOptions.value
        })
    },
    {
        colProps: {
            span: 20,
        },
        label: '产业定位',
        prop: 'parkInfo',
    },
    {
        colProps: {
            span: 16,
        },
        label: '重点园区',
        prop: 'address',
    },
    {
        colProps: {
            span: 10,
        },
        fieldProps: {
            disabled: true,
        },
        label: '经度',
        prop: 'longitude',
    },
    {
        colProps: {
            span: 10,
        },
        fieldProps: {
            disabled: true,
        },
        label: '纬度',
        prop: 'latitude',
    },
]

const rules = {
    areaId: [
        {
            message: '所属区域',
            required: true,
        },
    ],
    typeId: [
        {
            message: '空间布局类型',
            required: true,
        },
    ],
}

</script>

<template>
    <ElCard shadow="never">
        <el-button @click="goBack">
            返回列表
        </el-button>

        <ElSkeleton v-if="isLoading" animated class="mt-20" />

        <template v-else>
            <div class="mt-20">
                <PlusForm ref="form" v-model="state" :columns="columns" :label-width="120" :rules="rules"
                    :has-footer="false" :row-props="{ gutter: 20 }">
                    <template #plus-field-address>
                        <searchMap v-model:state="state"></searchMap>
                    </template>
                </plusform>
            </div>

            <div class="mx-auto mt20 flex justify-center">
                <el-button @click="goBack">
                    取消
                </el-button>

                <!-- :loading="isPending" -->
                <SubmitBtn type="primary" @click="submit">
                    提交
                </SubmitBtn>
            </div>
        </template>
    </ElCard>
</template>